<div class="navbar navbar-fixed-top main-nav" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a routerLink="posts" class="navbar-brand-my">
          <img src="assets/imgs/nice-fish.png" width="45">
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class='nav navbar-nav'>
        <li routerLinkActive='active'>
          <a routerLink='posts'>阅读</a>
        </li>
        <li routerLinkActive='active'>
          <a routerLink='post/write'>写作</a>
        </li>
      </ul>

      <ul *ngIf="!currentUser?.userName" class="nav navbar-nav navbar-right">
        <li routerLinkActive='active' [routerLinkActiveOptions]='{exact:true}'>
          <a routerLink='login'><i class='fa fa-sign-in'></i></a>
        </li>
        <li routerLinkActive='active'>
          <a routerLink='register'><i class='fa fa-user-plus'></i></a>
        </li>
      </ul>

      <ul *ngIf="currentUser?.userName" class="nav navbar-nav navbar-right">
        <li routerLinkActive='active'>
          <a routerLink='home'><i class="fa fa-user"></i></a>
        </li>
        <li routerLinkActive='active'>
          <a routerLink='manage'><i class="fa fa-cog"></i></a>
        </li>
        <li routerLinkActive='active'>
          <a href="javascript:void(0);" (click)="doLogout()"><i class="fa fa-sign-out"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container main-container">
  <router-outlet></router-outlet>
</div>